<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">

  <title>Drawer</title>
  <meta name="description" content="Hidden menu options triggered by the menu button in the header">

  <link rel="stylesheet" href="../../style/headers.css">
  <link rel="stylesheet" href="../drawer.css">

  <!--
      This <style> and <link> is only used for the example code, is no needed for the real case use
    -->
  <style>
    html, body {
      margin: 0;
      padding: 0;
      font-size: 10px;
      background-color: #fff;
      height: 100%;
      overflow-x: hidden;
    }

    h2.bb-docs {
      font-size: 1.8rem;
      font-weight: lighter;
      color: #666;
      margin: -0.1rem 0 0;
      background-color: #f5f5f5;
      padding: 0.4rem 0.4rem 0.4rem 3rem;
      border: solid 0.1rem #e8e8e8;
    }

    section[role="region"] {
      height: 100%;
      line-height: 1em;
      font-size: 2.2rem;
    }

    div[role="main"] {
      background: #fff;
      height: calc(100% - 5rem);
      overflow: hidden;
    }

    div[role="main"] p {
      margin: 2rem 2.5rem;
    }

    /* Base icons */
    section[data-type="sidebar"] > header .icon.icon-add {
      background-image: url();
    }
  </style>

</head>

<body role="application">

  <section data-type="sidebar">
    <header>
      <menu type="toolbar">
        <a href="#"><span class="icon icon-add">add</span></a>
      </menu>
      <h1>Title <em>(9)</em></h1>
    </header>
    <nav>
      <ul>
        <li><a href="#">label</a></li>
        <li><a href="#">label</a></li>
        <li><a href="#">label</a></li>
        <li><a href="#">label</a></li>
      </ul>
      <h2>Subtitle</h2>
      <ul>
        <li><a href="#">label</a></li>
        <li><a href="#">label</a></li>
        <li><a href="#">label larger label than the </a></li>
        <li><a href="#">label</a></li>
      </ul>
    </nav>
  </section>

  <section id="drawer" role="region">
    <header>
      <a href="#"><span class="icon icon-menu">hide sidebar</span></a>
      <a href="#drawer"><span class="icon icon-menu">show sidebar</span></a>
      <h1>Inbox</h1>
    </header>
    <div role="main"></div>
  </section>

</body>
</html>
